<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <jsp:include page="../inc/inc.jsp"></jsp:include>
    <script type="text/javascript">

        $(document).ready(function () {
            $("#datagd").datagrid({
                url:'${pageContext.request.contextPath}/product_page_info?type=3',
                striped: true,
                border: false,
                collapsible:false,		//是否可折叠的
                loadMsg:'正在加载数据...',
                fit: true,				//自动大小
                idField:'id',
                singleSelect:true,//是否单选
                pagination:true,//分页控件
                rownumbers:true,//行号
                remoteSort:false,
                columns:[[{
                    field:'name',
                    title:'名称',
                    sortable:true,
                    width:200,
                    halign:'center'
                },{
                    field:'type',
                    title:'类型',
                    sortable:true,
                    width:200,
                    halign:'center',
                    formatter : function(value, row, index) {
                        switch (value) {
                            case 1:
                                return '刀片';
                            case 2:
                                return '斗齿、齿座';
                            case 3:
                                return '侧板';
                            case 4:
                                return '铲斗';
                            case 5:
                                return '紧固件';
                        }
                    }
                },{
                    field:'des',
                    title:'描述',
                    sortable:true,
                    width:150,
                    halign:'center'
                },{
                    field:'picUrl',
                    title:'图片',
                    width:200,
                    halign:'center',
                    formatter : function(value, row, index) {
                        return $.formatString('<img height="120px" width="200" src=\'{0}\' />',value);
                    }
                }
                ]],
                toolbar: '#toolbar'
            });
        });
    </script>
</head>

<body>
    <div class="easyui-layout" data-options="fit:true,border:false" >
        <table id="datagd"></table>
    </div>

    <div id="toolbar" style="display:none">
        <a onclick="addProduct();" href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'">添加</a>
        <a onclick="editProduct();" href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-edit'">修改</a>
        <a onclick="delProduct();" href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'">删除</a>
    </div>

    <div id="dlg" class="easyui-dialog" style="width:620px;height:auto;padding:10px 20px" buttons="#dlg-buttons" data-options="closed:true,modal:true">
        <form id="fm" method="post" enctype="multipart/form-data">
            <input type="text" name="id" />
            <table  class="grid">
                <tr>
                    <td>名称</td>
                    <td>
                        <input id="name" name="name" type="text" class="easyui-textbox" data-options="required:true,validType:['length[0,40]']" />
                    </td>
                    <td>分类</td>
                    <td>
                        <select class="easyui-combobox" name="type"  data-options="editable:false,width:120">
                            <option value="1" selected="true">刀片</option>
                            <option value="2">斗齿、齿座</option>
                            <option value="3">侧板</option>
                            <option value="4">铲斗</option>
                            <option value="5">紧固件</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>图片</td>
                    <td colspan="3">
                        <input name="pic" type="text" class="easyui-filebox" data-options="width:200" />
                    </td>
                </tr>
                <tr>
                    <td>描述</td>
                    <td colspan="3"><input type="text" name="des" class="easyui-textbox" data-options="multiline:true,height:50" style="width:300px;" /></td>
                </tr>
            </table>
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton c8" iconCls="icon-ok" onclick="saveProduct();" style="width:90px">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton c2" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">取消</a>
    </div>
</body>
</html>
<script type="text/javascript">
    //增加
    function addProduct() {
        $('#dlg').dialog('open').dialog('setTitle','编辑产品');
        $('#fm').form('clear');
    }

    function saveProduct(){
        $('#fm').form('submit', {
            url:"product_save",
//            onSubmit: function(){
//                // do some check
//                // return false to prevent submit;
//            },
            success:function(result){
                var result = eval('(' + result + ')');
                if(result.success){
                    $.messager.show({
                        title: '提示',
                        msg: result.msg
                    });
                    $('#datagd').datagrid('reload');
                    $('#dlg').dialog('close');
                }else{
                    $.messager.show({
                        title: '提示',
                        msg: result.msg
                    });
                }
            }
        });
    }

    //修改
    function editProduct(){
        var row = $('#datagd').datagrid('getSelected');
        if (row){
            $('#dlg').dialog('open').dialog('setTitle','编辑产品');
            $('#fm').form('load',row);
        } else {
            $.messager.alert("提示","请选择一条记录");
        }
    }

    //删除
    function delProduct(){
        var row = $('#datagd').datagrid('getSelected');
        if (row){
            $.messager.confirm('提示','请确认是否删除?',function(r){
                if (r){
                    $.ajax({
                        url:'product_del',
                        type:'POST',
                        data:{id:row.id},
                        success: function(data){
                            var result = eval('(' + data + ')');
                            if(result.success){
                                $('#datagd').datagrid('reload');
                                $('#datagd').datagrid('clearSelections');
                                $.messager.show({
                                    title: '提示',
                                    msg: result.msg
                                });
                            }else{
                                $.messager.show({
                                    title: '提示',
                                    msg: result.msg
                                });
                            }
                        }
                    });
                }
            });
        } else {
            $.messager.alert("提示","请选择一条新闻。");
        }
    }
</script>